<template>
	<div class="buts">
		<button class="allBtn small-btn button button--aylen" v-on:click="changeRoad(0)" 
		:class="[road==0?'btn-active':'btn-unactive']">{{$t('realTime.allroad')}}</button>
		<span class="line"></span>
		<img v-if='roadNum>=17' class="leftbut" src="../../../../img/left.png" v-on:click='moveLeft()'>
		<div class="spanbut-wrap">
			<div class="spanbut">
				<button class="roadButn small-btn button button--aylen" v-for='(item,index) in roadNum' :key="index"
				:class="[road==item?'btn-active':'btn-unactive']" 
				v-on:click='changeRoad(item)'>{{$t('realTime.road')}}{{item}}</button>		
			</div>
		</div>
		<img v-if='roadNum>=17'  src="../../../../img/right.png" v-on:click='moveRight()' />
	</div>
</template>
<script>
	import SystemService from 'services/systemService'
	export default {
		data() {
			return {
				Num: 0,
				roadNum: [],
				road:0
			}
		},
		created() {
			this.getLine()
		},
		methods: {
			getLine() {
				SystemService.getLine()
				.then((res) => {				
					if (res.errcode === 0) {
						this.roadNum = res.group_id
					}
				})
			},
			changeRoad(road='') {
				this.road = road
				this.$emit('setData',road)		
				if (road >= 10) {
					this.moveRight()
				} else {
					this.moveLeft()
				}
			},
			moveLeft: function() {
				if (this.road >= 17) {
					this.Num--;
					if (this.Num <= 0) {
						this.Num = 0;
					}
					$(".spanbut").animate({
						'left': this.Num * (-64)
					}, 500)
				}
			},
			moveRight: function() {
				if (this.road >= 17) {
					this.Num++;
					if (this.Num >= 8) {
						this.Num = 8;
					}
					$(".spanbut").animate({
						'left': this.Num * (-64)
					}, 500)
				}
			}
		}
	}
</script>
<style scoped >
	.buts {
		padding:20px; 
		justify-content: center;
	}	
	.spanbut-wrap {
		display: inline-block;
		width: 1020px;
		height: 20px;
		overflow: hidden;
		vertical-align: top;
		position: relative;
	}	
	.roadButn{
		margin: 0 5px;
	}
	.spanbut {
		position: absolute;
		left: 0;
	}
	img {
		cursor: pointer;
	}	
	.line {
		height: 20px;
		border-left: 1px solid #E2E2E2;
		margin: 0 5px;
	}
</style>